﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script src="./node_modules/vue-resource/dist/vue-resource.min.js"></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<div id="app">
    
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
          </div>
          <div class="panel-body form-inline">
                <label>
                    id:
                    <input type="text" v-model="id"/>
                </label>
                <label>
                    name:
                    <input type="text" v-model="name" class="form-control"/>
                </label>
                <input type="button" value="添加" @click="add" class="btn btn-primary"/>
          </div>
    </div>
    
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>ctime</th>
                <th>operation</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td>
                    <a href="">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>


<script>
    var vm=new Vue({
        el:"#app",
        data:{
            id:"",
            name:"",
            list:[
                {id:1,name:"奔驰",ctime:new Date()},
                {id:2,name:"宝马",ctime:new Date()},
            ]
    
        },
        methods:{
            add(){

            },
            getAllList(){
                this.$http.get("http://vue.studyit.io/api/getprodlist").then(result=>{
                    if (result.body.status===0) {
                        this.list=result.body.message;
                    }else{
                        alert("failure");
                    }
                })
            }
    
        },
        created:function(){
            this.getAllList();
        }
    })
    </script>
</body>
</html>